<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>后台管理页面</title>
  <link type="text/css" rel="stylesheet" href="../css/MyCss.css" />
  <link type="text/css" rel="stylesheet" href="../css/basi.css" />
  <link type="text/css" rel="stylesheet" href="../css/git-plugin.css" />
  <script src="../js/MyjsV0-8.js"></script>
  <style>
	/*S-canlender*/
	.calend{background: #fff;  position: relative;  z-index: 5;  margin: 0px auto; font-size: 12px; font-family: -webkit-pictograph;  /*管理页特殊设定：margin-top: 0px;*/  }
	.calend > .calend_top{width: 236px;  height: 25px;  background: #555;  text-align: center;  line-height: 29px;  position: relative;}

	.calend > .calend_top p {color: #fff;  font-size: 14px; line-height: 29px;}
	.calend > .calend_top .calend-top-ico {width: 16px;  height: 16px; background: url(../img/calend.png); left: 66px; top: 5px; position: absolute;}
	.calend > .calend_body{padding: 4px;  width: 218px; background: #fff;  position: relative; min-height: 125px; }
	.calend > .calend_body table {width: 212px; text-align:center; position: absolute; z-index: 2;}
	.calend > .calend_body table tbody tr td{color: #555; width: 28px;  height: 12px;  line-height: 18px; cursor: pointer; padding: 2px 10px; transform:1s; -moz-transition:1s; -webkit-transition:1s;}
	.calend > .calend_body table tbody tr .current-day {color: red;}
	.calend > .calend_body table tbody tr .no-current-day {}
	.calend > .calend_body table tbody tr .other-month-day {color: #ccc;}
	.calend > .calend_body table tbody tr .target-month-day {color: #fff;}

	.calend > div > .current-day-bg {width: 20px; height: 20px; background: #555; border-radius: 50%; z-index: 1; position: absolute; top: 0; left: 0; transform:1s; -moz-transition:1s; -webkit-transition:1s; opacity: 0.5;}
	/* 切换页按钮 */
	.calend > .lr-bt {}
	.calend > .lr-bt div i {width: 16px;  height: 16px;  cursor: pointer; }
	.calend > .lr-bt div {position: absolute;  top: 6px;   z-index:2; }
	.calend > .lr-bt .l-bt {left: 4px; }
	.calend > .lr-bt .l-bt i {background: url(../img/r1.png); }
	/*.lr-bt .l-bt i:hover {background: url(); }*/
	.calend > .lr-bt .r-bt {right: 4px; }
	.calend > .lr-bt .r-bt i {background: url(../img/l1.png); }
	/*.lr-bt .r-bt i:hover {background: url(); }*/
	/*E-canlender*/

	.cacse-label-active		{background:#555; color: #fff;}
	.cacse-label-un-active	{background:#fff; color: #555;}
	.cacse-div-active			{width: 236px; overflow: inherit;}
	.cacse-div-un-active		{width: 0; overflow: hidden;}
	
	/* 随笔文章头部 */
	.page-top div:nth-child(1) {margin-bottom: 10px; }
	.page-top .page-top-infor > span:first-child {margin-left: 0px !important;}
	.page-top .page-top-infor > span {margin-left: 10px; color: #555; font-size: 12px;}
	.page-top .page-top-infor > span a:first-child {margin-left: 0px !important;}
	.page-top div:last-child {float: right; font-size: 12px; color: #555; position: absolute; right: 18px; top: 18px;}

	.body-content-in {background:#fff; padding: 20px; border-radius: 3px;}
	
	.body-content-in > div { border-bottom: 1px solid #d1d5da; margin-top: 10px; padding: 10px; position: relative; overflow: hidden; font-size: 14px;}
	.body-content-in > div:nth-child(1) {margin-top: 0px !important;}
	
	.title {box-shadow: 0px 1px 6px #ddd; padding-left: 10px; background: #555; border-left: 10px solid #f6f4f0; line-height: 25px; color: #fff; width: 166px;}
	.body-content-in > div label:nth-child(2) {margin-top: 4px;}
	.cnt-textarea {margin-top: 0px !important;}
	.textarea-style1 {min-height: 888px; width: 97.5%;}
	.body-content-in .git-show-cnt {display: none; min-height: 888px;} 
	.body-content-in .git-show-cnt-in {padding: 10px;}
	

	/* 左栏 */
	.nav-list {border-top: none;}
	.nav-list > ul > li {position: relative;}
	.nav-list ul li label {width: 236px;}
	.nav-list ul li div {position: absolute; transition: all 0.2s ease-out; width: 0px; top: 0;	left: 236px; background: #fff; box-shadow: 0px 1px 6px #ddd; z-index: 2; overflow: hidden;}
 
	.body-nav {overflow: inherit;}

	.body {z-index: 0;}

	 
	.manage-page {}
	.manage-page > div:first-child {margin-top: 0px !important;}
	.manage-page > div {min-height: 66px; border: 1px solid #e6e6e6; border-radius: 3px; margin-top: 10px; padding: 3px;}
	.manage-page > div > div:nth-child(1) {border-left: 10px solid #e6e6e6; padding: 3px 6px; background: #555; color: #fff;}
	.manage-page > div > div:nth-child(2) {padding: 6px;}
	

  </style>
 </head>
 <body>
	
	<!-- S body -->
	<div class="body">
		<div class="body-con">
			<!-- 导航 -->
			<div class="body-nav-no">
				
			</div>
			<!-- 内容 -->
			<div class="body-content" style="position: relative;">
				<div class="body-content-in">
					<!-- 管理页 -->
					<div class="manage-page">
						<div>
							<div>API管理</div>
							<div>
								<input type="button" value="新建API夹" class="box-style1"/>
								<input type="button" value="编辑已有API文档" class="box-style1"/>
								<input type="button" value="新建API文档" class="box-style1"/>
							</div>
						</div>
						<div>
							<div>随笔管理</div>
							<div>
								<ul class="nolist">
									<li style="border: 1px solid #e6e6e6; color: #555;">
										<span style="margin: 0 20px">java</span>
										<span style="margin: 0 20px">
											编辑
										</span>
										<span style="margin: 0 20px">删除</span>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="cnt-control">
						<ul class="nolist">
							<li></li>
							<li>
								<input class="input-button-style1 git-textarea-ok" type="button" value="ok"/>
							</li>
						</ul>
					</div>
					<div class="page-top">
						<div class="page-top-title">
							<h1>JDK版本新特性介绍&JDK1.7</h1>
						</div>
						<div class="page-top-infor">
							<span class="time">2017年05月09日 23:19:10</span>
							<span class="readCount">阅读数：888</span>
							<span class="tags">
								<span class="">标签：</span>
								<a class="tag-link radius-box-style1">HTML</a>
								<a class="tag-link radius-box-style1">javaScript</a>
							</span>
						</div>
						<div style="float: right;"><span class="last-time">上一次更新时间：2017年05月09日 23:19:10</span></div>
					</div>
					<div class="cnt-textarea">
						<textarea class="textarea-style1" spellcheck="false"></textarea>
					</div>
					<div class="git-show-cnt"></div>
					
				</div>
			</div>
		</div>
	</div>
	<!-- E body -->

	<!-- 左栏 -->
	<div class="body-nav">
		<div class="body-nav-in">
			<div style="height: 10px;"></div>
			<!--S-canlender-->
			<div class="calend clearFloat">
				<div class="calend_top">
					<i class="calend-top-ico"></i>
					<p class="p_inner"></p>
				</div>
				<div class="calend_body">
					<table class='cre_tab' cellspacing="0" cellpadding="0">
						<tbody>
							<tr>
								<td class="week">日</td>
								<td class="week">一</td>
								<td class="week">二</td>
								<td class="week">三</td>
								<td class="week">四</td>
								<td class="week">五</td>
								<td class="week">六</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="lr-bt">
					<div class="l-bt"><i></i></div>
					<div class="r-bt"><i></i></div>
				</div>
				<div>
					<div class="current-day-bg"></div>
				</div>
			</div>
			<!--E-canlender-->
			<!-- 导航栏 -->
			<div class="nav-list">
				<ul class="nolist" data-id="12">
					
				</ul>
			</div>
			
		</div>
	</div>
	<script src="../js/MyjsDataStructureV0-1.js"></script>
	<script src="../js/canlender-plugin.js"></script>
	<script src="../js/git-plugin V0.js"></script>
	<script>
	/* S 日历 */
	var manageCanlender = new ManegeCanlender(new Canlender());
	manageCanlender.doReay();
	/* E 日历 */
/*
|Author|威
|:---:|:---:
|E-mail|chenJiWey@163.com
|date|2018/10/11
# Ajax异步交互
### 说明
    描述
### 字段描述
|类型|字段|描述
|---|---|---
### 构造描述
|构造|描述
|---|---
|模板|模板
### 方法描述
|返回值|方法|参数
|---|---|---
|模板|模板|模板
### 案例
### 详细描述

*/
	/*
	test1 列出管理结构 2018/10/11

	*/
	//初始化
	$(".nav-list").eq(0).style.borderTop = "none";
	//每次窗口的变化
	var bodyNavNo = $(".body-nav-no").eq(0);
	var bodyNav = $(".body-nav").eq(0);

	var bodyContentIn = $(".body-content-in").eq(0);
	initAndUpdate();
	window.onresize = function(e){
		initAndUpdate();
	}
	function initAndUpdate(){
		document.body.style.minHeight = window.innerHeight+"px";
		//对导航条的初始化和随着窗口的变动进行更新
		var marginLeft = bodyNavNo.getMarginLeft();
		var width = bodyNavNo.clientWidth;
		
		bodyNav.style.width = width + "px";
		bodyNav.style.left = marginLeft + "px";
		bodyNav.style.display = "block";
		$(".body-nav-in").eq(0).style.height = (window.innerHeight-16)+"px";

		bodyContentIn.style.minHeight = window.innerHeight - 16+"px";
	}

	/* git-input 2018/10/11 */
	
	var isUpdate = false;
	new DefaultOp({
		textArea: ".textarea-style1",
		runButton: ".git-textarea-ok",
		gitContain: ".git-show-cnt",
		gitContainInClass: "git-show-cnt-in",
		gitContainIn: ".git-show-cnt .git-show-cnt-in",
		fn: function(e){
			if(!isUpdate){
				$(".cnt-textarea").eq(0).style.display="none";
				$(".git-show-cnt").eq(0).style.display="block";
				e.target.value = "update";
				isUpdate = true;
			}else{
				$(".cnt-textarea").eq(0).style.display="block";
				$(".git-show-cnt").eq(0).style.display="none";
				
				e.target.value = "ok";
				isUpdate = false;
			}},
	});

	/* API MyJs */
	var flag = true;
	$(".input-text_ input").forEach = function (e){
		e.disabled = false;
	}
	$(".body-content-in").eq(0).onclick = function(e){
		if(e.target.type === "radio"){
			console.log("ra");
			if(e.target.checked === true)
				e.target.checked = false;
		}
		/*
		if(flag) {
			flag = false;
			e.target.text("点击选择默认");
		} else {
			//选中--新建
			flag = true;
			e.target.text("点击进行新建");
			//console.log($(".radioTest").eq(0).checked + "");
		}
		*/
		
		
	}
	
	//2018/9/29 
	//添加层级字段，用于判断当前层
	//添加data-id字段，用于跟踪当前Cascade对象
	//对应的动画以链式格式保存，当点击ViceEndCascade对象将会根据链后退恢复到顶级之前

	var topCasc = new RowCascade();
	topCasc.setText("API");

	var vCasc1 = new RowCascade();
	vCasc1.setText("MyJs");
	var sCasc1 = new RowCascade();
	sCasc1.setText("Util");

	var sCasc = new RowCascade();
	sCasc.setText("ajax交互");

	vCasc1.add(sCasc);

	//顶层元素动画应该是最后才集中添加
	topCasc.add(vCasc1);
	topCasc.add(sCasc1);
	console.log($(".nav-list ul").eq(0).insert(topCasc.html()));//插入

	var topCasc1 = new RowCascade();
	topCasc1.setText("topCasc1");
	topCasc1.add(vCasc1);
	topCasc1.add(sCasc1);
	$(".nav-list ul").eq(0).insert(topCasc1.html());//插入
	
	addAni($(".nav-list ul").eq(0).childs());//生成RowCascadeLiEvent操作

	//递归添加动画 传入$(".nav-list ul").eq(0).childs()
	function addAni(childs){	
		console.log(childs);
		var arr = [];
		childs.forEach(item => {
			var label = item.$("label").eq(0);
			arr.push(label)
			if(label.next() !== null)
				addAni(label.next().$("ul").eq(0).childs());//继续为子元素添加RowCascadeLiEvent
			else console.log(label);
		});
		//展开子级对象
		new RowCascadeLiEvent({
			liElements: arr,
			isInitRun: false,
		}).doReady();
	}

	function SuperCascade(){
		var childs = [];
		var text;
		var id;
		this.setText = function(t){
			text = t;
		}
		this.getText = function(){
			return text;
		}
		this.setId = function(ID){
			id = ID;
		}
		this.getId = function(){
			return id;
		}
		this.topHtml = function(){
			return '<li>'+
						'<label data-id="'+this.getId()+'">'+this.getText()+'</label>';
		}
		this.bomHtml = function(){
			return '</li>';
		}
		this.add = function (child){
			childs.push(child);	
		}
		this.getChilds = function(){
			return childs;
		}
		this.html = function(){
			var html = "";
			if(childs.length > 0){
				html += '<div><ul class="nolist">';
				for(var i = 0; i < childs.length; i++)
					html += childs[i].html();
				html += '</ul></div>';
			}
			return this.topHtml() + html + this.bomHtml();
		}
	}
	
	RowCascade.extends(SuperCascade);
	function RowCascade(TopEvent){
		SuperCascade.call(this);
	}
	//点击达到效果后关闭相关的级
	

	
	
	RowCascadeLiEvent.extends(SuperLiEventCasc);
	function RowCascadeLiEvent(data){
		SuperLiEventCasc.call(this, data);
		
		function open(i, flag){
			var next = data.liElements[i].next();
			if(next !== null){
				next.removeClass();
				var count = next.$("ul").eq(0).childs().length;
				if(flag){
					next.css("width: 236px; overflow: inherit;", false);
				}else
					next.css("width: 0px; overflow: hidden;", false);
			}
		}
		this.overEventCss = function (i){
			data.liElements[i].removeClass();
			data.liElements[i].addClass("cacse-label-active");
		}
		//当前移出样式设置
		this.outEventCss = function (i){
			data.liElements[i].removeClass();
			data.liElements[i].addClass("cacse-label-un-active");
		}
		//e {i:preIndex}
		this.preClickFun = function (i){
			console.log("preClickFun");
			data.liElements[i].removeClass();
			data.liElements[i].addClass("cacse-label-un-active");
			open(i);
		}
		this.dbClickFun = function(i, e){
			console.log("第二次点击");
			open(i);
		}
		//设置当前的元素 
		//e {i:i}
		var flag = true;
		this.nowClickFun = function (i){
			//再次点击顶级元素可打开-显示原来所打开的；顶级元素点击可打开缩回
			var currentLabel = data.liElements[i];
			currentLabel.removeClass();
			currentLabel.addClass("cacse-label-active");
			open(i, true);
		}
	}
	//左栏选择内容 顶级 一 动画联动
	


	//副级 二 动画联动
	
	
	/*
	$(".nav-list ul").first().forEach(function(item){
		console.log(item.$("ul").first());
	})
	
	*/

	

	</script>
 </body>
</html>